<!--
 * @Author: Meow
 * @Date: 2019-11-20 10:13:16
 * @LastEditors: Meow
 * @LastEditTime: 2019-11-22 14:14:32
 * @Description: 流程详情页
 -->
<template>
  <div id="Detail" class="detail">
    <section class="section-top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">业务流程管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{type=0?'新增':baseInfoData.busiProceName}}-版本管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button size="mini" class="back-button" @click="back">返回</el-button>
    </section>
    <section class="section-baseInfo" v-loading="baseInfoLoading">
      <div class="section-title">
        <h1>基本信息</h1>
      </div>
      <ul>
        <li>
          <label>业务流程名称：</label>
          <el-input size="mini" :disabled="disabled" type="text" v-model="baseInfoData.busiProceName" />
        </li>
        <li>
          <label>父流程：</label>
          <el-select size="mini" :disabled="disabled" v-model="baseInfoData.parentId" placeholder="请选择" @change="ChangeFatherProcess" clearable>
            <el-option :disabled="disabled" v-for="v in fatherFlowOptions" :key="v.busiProceId" :label="v.busiProceName" :value="v.busiProceId">
            </el-option>
          </el-select>
        </li>
        <li v-if="baseInfoData.parentId">
          <label>父节点：</label>
          <el-select size="mini" :disabled="disabled" v-model="baseInfoData.parentNode" placeholder="请选择" clearable>
            <el-option :disabled="disabled" v-for="v in fatherNodeOptions" :key="v.nodeId" :label="v.nodeName" :value="v.nodeId">
            </el-option>
          </el-select>
        </li>
        <li>
          <label>概述：</label>
          <el-input size="mini" :disabled="disabled" type="text" v-model="baseInfoData.summary" />
        </li>
        <li>
          <label>标签：</label>
          <treeselect :disabled="disabled" :multiple="true" :options="queryLabelTree" :flat="true" :default-expand-level="1" :normalizer="_normalizer" placeholder="选择标签"
            noOptionsText="暂无数据" noResultsText="没有找到匹配结果" noChildrenText="没有子节点" v-model="baseInfoData.label" />
          <!-- <el-input size="mini" :disabled="disabled" type="text" :value="baseInfoData.labelName | FormatNull" /> -->
        </li>
      </ul>
      <div class="save-box">
        <el-button size="mini" class="save-btn" @click="AddProcess" type="primary" v-if="type==0">下一步</el-button>
        <el-button size="mini" class="save-btn" @click="UpdateProcess" type="primary" v-if="type==1">保存</el-button>
      </div>
    </section>
    <section class="section-table" v-if="type!=0">
      <div class="section-title">
        <h1 v-if="type!=0">流程节点</h1>
        <el-button size="mini" type="primary" @click="ClickAddNode">添加</el-button>
      </div>
      <el-table :data="NodeForm" :header-cell-style="tableStyle" size="mini" border v-loading="loading">
        <el-table-column prop="nodeName" label="业务名称" align="center"></el-table-column>
        <el-table-column prop="nodeType" label="节点类型" align="center"></el-table-column>
        <el-table-column prop="secretLevel" label="业务密级" align="center"></el-table-column>
        <el-table-column prop="businessBoundary" label="业务边界" align="center"></el-table-column>
        <el-table-column prop="labelName" label="标签" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showNodeDetai(scope.row)">查看详情</el-button>
            <el-button size="mini" type="primary" @click="toUpdateNodeDetail(scope.row)">修改</el-button>
            <el-button size="mini" @click="DeleteNode(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <!-- 弹出层 [添加]流程节点↓-->
    <section class="section-dialog">
      <el-dialog :title="myNodeType==0?'添加流程节点':myNodeType==1?'修改流程节点':'查看流程节点'" :visible.sync="showDialog" width="70%">
        <CreatedNodeDetail ref="Tabs" @func="getResult" v-if="myNodeType==0" :baseInfoData="baseInfoData" :queryLabelTree="queryLabelTree" :NodeDisabled="NodeDisabled">
        </CreatedNodeDetail>
        <SearchNodeDetail v-if="myNodeType==2" :baseInfoData="baseInfoData" :queryLabelTree="queryLabelTree" :NodeDisabled="NodeDisabled" :currentNodeId="currentNodeId"></SearchNodeDetail>
        <!-- <Tabs ref="Tabs" :baseInfoData="baseInfoData" :queryLabelTree="queryLabelTree" @func="getResult" :myNodeType="myNodeType" :NodeDisabled="NodeDisabled"></Tabs> -->
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="showDialog = false">{{NodeDisabled?'关闭':'取消'}}</el-button>
          <el-button v-if="myNodeType==0" size="mini" type="primary" @click="SubmitNode">确定</el-button>
        </span>
      </el-dialog>

    </section>
  </div>
</template>
<script>
// 引入树选择器组件
import CreatedNodeDetail from "./CreatedNodeDetail";
import SearchNodeDetail from "./SearchNodeDetail";
import Tabs from "./Tabs";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import processManagementApi from "@/httpUtils/ExternalManagement/processManagement";
export default {
  name: "Detail",
  components: {
    Treeselect, // 标签树
    CreatedNodeDetail, // 添加节点详情
    SearchNodeDetail, // 查看节点详情
    Tabs // 添加流程节点
  },
  data() {
    return {
      type: 0, // 0:新增流程 1：修改详情 2：查看详情
      // 是否显示加载中[流程节点表格]
      loading: false,
      // 是否显示加载中[添加流程节点弹出层]
      showDialog: true,
      // 是否显示加载中[流程节点基本信息]
      baseInfoLoading: false,
      // 是否禁止点击
      disabled: false,
      // 表格头部样式
      tableStyle: {
        color: "#606266",
        background: "#eef1f6"
      },
      // 基本信息
      baseInfoData: {
        busiProceName: "", // 业务流程名
        busiProceId: "", // 业务流程ID
        parentId: "", // 父流程id 下拉列表的ID
        summary: "", // 概述
        label: [], // 标签
        parentNode: "" // 父节点
      },
      // 父流程下拉列表
      fatherFlowOptions: [],
      // 父节点下拉列表
      fatherNodeOptions: [],
      // 标签树
      queryLabelTree: [],
      // 流程节点列表
      NodeForm: [],
      // 0：新增流程节点 1：修改节点详情 2：查看节点详情
      myNodeType: 0,
      // 流程节点是否禁止点击
      NodeDisabled: false,
      // 当前节点ID
      currentNodeId: ""
    };
  },
  created() {
    // TODO: 开发中 写死
    let versionId = 1000001013078849;
    let busiProceId = 1000000544638679;

    // TODO: 开发后恢复↓
    // let versionId = this.$route.query.versionId;
    // let busiProceId = this.$route.query.busiProceId;

    this.type = this.$route.query.type; // 页面类型 0：新增流程 1：修改详情 2：查看详情

    // 查看详情禁止点击
    if (this.type == 2) {
      this.disabled = true;
    }
    console.log("busiProceId：", busiProceId, "type", this.type);
    // let busiProceName = this.$route.query.busiProceName;
    this.baseInfoData.versionId = versionId;
    this.baseInfoData.busiProceId = busiProceId;
    // this.baseInfoData.busiProceName = busiProceName;

    this.GetOptions(); // 获取父流程下拉列表
    this.GetLabelTree(); // 获取标签树

    // 修改和查看详情请求页面基本信息和流程节点列表
    if (this.type == 1 || this.type == 2) {
      this.GetBaseInfo(versionId); // 获取流程基本信息
      this.GetNode(versionId); // 获取流程节点列表
    }

    // this.busiProceId = this.$route.query.busiProceId;
    // this.versionId = this.$route.query.versionId;
    // this.GetNode(this.$route.query.versionId);
  },
  filters: {
    // 过滤Null
    FormatNull(value) {
      console.log(value);
      if (value == null || value == "null") {
        return "";
      } else {
        return value;
      }
    }
  },
  methods: {
    // 获取父流程下拉列表数据
    GetOptions() {
      let params = {
        busiProceName: "" // 关键词搜索
      };
      processManagementApi.queryBusiProce(params).then(res => {
        console.log(" 获取父流程下拉列表数据", res.data.data);
        if (this.type == 1) {
          // 修改时过滤自身流程
          let filterData = res.data.data.list.filter(item => {
            return item.busiProceId != this.baseInfoData.busiProceId;
          });
          console.log(filterData);
          res.data.data.list = filterData;
        }
        this.fatherFlowOptions = res.data.data.list;
      });
      console.log(this.baseInfoData);
      console.log(this.baseInfoData.parentId);
    },
    // 获取父节点下拉列表数据
    GetFatherProcess(versionId) {
      console.log("versionId", versionId);
      let params = {
        versionId: versionId
      };
      processManagementApi.findBusiNodeByVersionId(params).then(res => {
        console.log(" 获取父节点下拉列表数据", res.data.data.list);
        this.fatherNodeOptions = res.data.data.list;
      });
    },
    // 改变父节流程时,联动获取父流程对应的父节点下拉列表数据
    ChangeFatherProcess(busiProceId) {
      if (busiProceId) {
        console.log("busiProceId", busiProceId);
        this.baseInfoData.parentNode = "";
        let obj = this.fatherFlowOptions.find(item => {
          return item.busiProceId == busiProceId;
        });
        let versionId = obj.versionId;
        this.GetFatherProcess(versionId);
      }
    },
    // 标签配置
    _normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.child
      };
    },
    // 获取标签列表
    GetLabelTree() {
      processManagementApi.queryLabelTree().then(res => {
        // console.log(res.data.data);
        this.IterationDelateMenuChildren(res.data.data);
        this.queryLabelTree = res.data.data;
      });
    },
    // 获取流程基本信息
    GetBaseInfo(versionId) {
      console.log("versionId", versionId);
      processManagementApi
        .findBusiProceById({
          versionId: versionId
        })
        .then(res => {
          console.log(res);
          console.log(" 获取流程基本信息", res.data.data[0]);
          this.baseInfoData = res.data.data[0];
          if (res.data.data[0].label) {
            res.data.data[0].label = res.data.data[0].label.split(",");
          } else {
            res.data.data[0].label = [];
          }
          // 若有父流程时获取父节点下拉列表
          if (this.baseInfoData.parentId) {
            this.GetFatherProcess(this.baseInfoData.versionId); // 请求父节点下拉列表
          }
        });
    },
    // 获取流程节点列表
    GetNode(versionId) {
      processManagementApi
        .findBusiNodeByVersionId({ versionId: versionId })
        .then(res => {
          console.log("流程节点", res.data.data);
          this.NodeForm = res.data.data.list;
        });
    },

    // 点击添加流程基本信息
    AddProcess() {
      this.baseInfoLoading = true;
      if (this.baseInfoData.busiProceName) {
        // 更改标签数据格式
        let obj = Object.assign({}, this.baseInfoData);
        console.log(obj);
        if (obj.label != null && obj.label != "") {
          obj.label = obj.label.join(",");
        } else {
          obj.label = "";
        }
        console.log(obj);
        processManagementApi.addBusiProce(obj).then(res => {
          console.log("添加流程", res.data);
          if (res.data.code == 200) {
            this.baseInfoLoading = false;
            this.$message.success("添加流程基本信息成功");
            console.log("?????????????", res.data.data);
            console.log("?????????????", res.data.data.versionId);
            this.type = 1;
            this.$router.push({
              path: `/${_routerPath.routerName}/ProcessManagementHost/Detail`,
              query: {
                busiProceId: res.data.data.busiProceId,
                versionId: res.data.data.versionId,
                type: 1
              }
            });
            // this.GetBaseInfo(res.data.data.versionId); // 刷新基本信息
            // this.disabled = true;
            // this.tpye = 1;
          } else {
            this.baseInfoLoading = false;
            this.$message.error(`添加流程基本信息流程失败`);
          }
        });
      } else {
        this.$message({
          message: "请输入流程名称",
          type: "error"
        });
        this.baseInfoLoading = false;
      }
    },
    // 点击修改流程基本信息
    UpdateProcess() {
      this.baseInfoLoading = true;
      if (this.baseInfoData.busiProceName) {
        // 更改标签数据格式
        let obj = Object.assign({}, this.baseInfoData);
        console.log(obj);
        if (obj.label != null && obj.label != "") {
          obj.label = obj.label.join(",");
        } else {
          obj.label = "";
        }
        console.log(obj);
        processManagementApi.updateBusiProce(obj).then(res => {
          console.log("修改流程数据", res.data);
          if (res.data.code == 200) {
            this.baseInfoLoading = false;
            this.$message.success("修改流程基本信息成功");
            this.GetBaseInfo(this.baseInfoData.versionId); // 刷新基本信息
          } else {
            this.baseInfoLoading = false;
            this.$message.error(`修改流程基本信息流程失败`);
          }
        });
      } else {
        this.$message({
          message: "请输入流程名称",
          type: "error"
        });
        this.baseInfoLoading = false;
      }
    },
    // 点击添加流程节点按钮
    ClickAddNode() {
      this.showDialog = true;
      this.myNodeType = 0;
    },

    // 添加节点
    SubmitNode() {
      this.$refs.Tabs.AddNode();
    },
    // 添加节点结果
    getResult(code) {
      console.log("result", code);
      if (code == 200) {
        this.showDialog = false;
        this.GetNode(this.baseInfoData.versionId); // 获取流程节点列表
      } else {
        this.showDialog = false;
      }
    },
    // 删除节点
    DeleteNode(index, row) {
      this.loading = true;
      console.log(row.nodeId);
      processManagementApi.delNode({ nodeId: row.nodeId }).then(res => {
        console.log("删除成功", res.data);
        if (res.data.code == 200) {
          this.GetNode(this.baseInfoData.versionId);
          this.loading = false;
        } else {
          this.loading = false;
        }
        this.$message({
          message: `节点${res.data.message}`,
          type: res.data.success ? "success" : "error"
        });
      });
      // this.formData2.skyBusiExecDepartments.splice(index, 1);
    },

    toUpdateNodeDetail(data) {
      console.log("data", data);
      let versionId = this.baseInfoData.versionId;
      this.$router.push({
        path: `/${_routerPath.routerName}/ProcessManagementHost/updateNodeDetail`,
        query: {
          nodeId: data.nodeId,
          busiProceId: data.busiProceId,
          versionId: versionId
        }
      });
    },

    // 查看节点详情
    showNodeDetai(row) {
      console.log("节点id", row.nodeId);
      this.currentNodeId = row.nodeId; // 当前节点id
      this.myNodeType = 2; // 0：添加节点 1：修改节点 2：查看节点
      this.NodeDisabled = true; // 禁止点击
      this.showDialog = true;
    },
    // --点击[返回]
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../ProcessManagement.less");
</style>